/* 主题模式下的代码块背景设置 */
html[data-theme-mode=light] {
  --zhi-code-tab-bg: #fff;           /* 代码标签背景：白色 */
  --zhi-code-content-bg: #f8f9fa;    /* 代码内容背景：浅灰色 */
}
html[data-theme-mode=dark] {
  --zhi-code-tab-bg: #000;           /* 代码标签背景：黑色 */
  --zhi-code-content-bg: #1e1e1e;    /* 代码内容背景：深灰色 */
}
html[data-theme-mode=green] {
  --zhi-code-tab-bg: #f5f5d5;        /* 代码标签背景：淡黄绿色 */
  --zhi-code-content-bg: rgba(27,31,35,.05);  /* 代码内容背景：极淡黑色透明背景 */
}

/* 隐藏语言标识后的默认箭头和复制按钮 */
#preview .protyle-action__language {
  right: .2rem !important;
}
#preview .protyle-action__language:after {
  display: none !important;
}
#preview .protyle-action__copy {
  display: none !important;
}

/* 代码块外观样式 */
.code-block {
   border: .5px solid var(--b3-border-color) !important;  /* 边框颜色 */
   border-radius: 5px !important;                         /* 圆角边框 */
  padding-top: 32px !important;                          /* 顶部内边距 */
  background: var(--zhi-code-tab-bg);                    /* 背景颜色使用主题变量 */

/*   width: 25%;                                            代码块默认宽度 25% */
/*   max-width: 100%;                                       代码块最大宽度 100% */
/*   resize: horizontal;                                    宽度可拖动 */
/*   overflow: auto;                                        字符超出宽度时自动滚动 */
}

/* 代码高亮区域样式 */
 .b3-typography div.hljs, 
.protyle-wysiwyg div.hljs {
  color: var(--b3-theme-on-background);                  /* 字体颜色 */
  padding: 8px;
  font-family: "Jetbrains Mono", "等距更纱黑体 SC", monospace; /* 字体族 */
  border-top: .5px solid var(--b3-border-color);         /* 顶部边框 */
  border-radius: 0 0 5px 5px !important;                  /* 下方圆角 */
  background: var(--zhi-code-content-bg);                /* 背景颜色 */

  /* 以下是新增或修改的属性 */
  overflow: visible !important;                          /* 移除内部滚动条 */
  white-space: pre-wrap !important;                      /* 允许长行自动换行 */
  word-break: break-all !important;                      /* 进一步确保单词内部也能换行 */
}




/* Jupyter 自定义代码块按钮调整 */
.protyle-wysiwyg [data-node-id][custom-jupyter-block-type][custom-jupyter-block-type=code]:after {
  top: 5px;
  left: 8.5em;
}
.protyle-wysiwyg [data-node-id][custom-jupyter-block-type][custom-jupyter-block-type=code]:before {
  top: 9px;
  left: 7.5em;
}

/* 行号样式 */
.protyle-linenumber__rows {
  width: 40px;
  padding: 8px 4px 4px;
  margin-bottom: 0;
  border-top: .5px solid var(--b3-border-color);
  font-family: var(--b3-font-family-code);
  border-top-left-radius: 0;
}
.protyle-linenumber__rows span:before {
  color: #808007;
}

/* 语言显示按钮样式（右上角） */
.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
  margin-top: 0;
  position: absolute;
  right: 3.5em;
  border-radius: 1px;
  opacity: 1 !important;
  font-family: var(--b3-font-family-code);
}
.b3-typography .code-block .protyle-action .protyle-action__language:after,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language:after {
  content: "›"; /* 右箭头 */
  font-family: var(--b3-font-family-code);
  color: #80808080;
  opacity: 1;
}

/* 行内代码块样式 */
code.hljs {
  border: 1px solid var(--b3-border-color1);
}

/* 图标和语言按钮通用样式 */
.b3-typography .code-block .protyle-action .protyle-icon,
.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
  opacity: 1 !important;
  background-color: transparent !important;
}
.b3-typography .code-block .protyle-action .protyle-icon svg,
.b3-typography .code-block .protyle-action .protyle-action__language svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language svg {
  color: gray;
}

/* 设置顶部三个mac按钮样式 */
.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 7px;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}
